<template>
  <view>
    <customtop top_title="支付保证金"></customtop>
    <view class="container">
      <view class="deposit" v-if="!loading && !result">
        <view class="title">{{ abb.title }}</view>
        <view v-if="abb.deposit > 0">
          <view class="pricebox"
            >该项目需支付
            <span class="price_color">{{ abb.deposit }}</span> 保证金</view
          >
          <view class="luckbtn luckbtn-payment" @click="payDeposit"
            >余额支付</view
          >
        </view>
        <view v-if="abb.deposit == 0">
          <view class="pricebox">该项目无需缴纳保证金</view>
          <view class="luckbtn luckbtn-payment" @click="payDeposit"
            >提交审核</view
          >
        </view>
      </view>
      <view class="result" v-if="result">
        <view class="txt"
          ><span class="u_icon"
            ><u-icon name="checkmark-circle" color="" size="" /></span
          >操作成功，等待系统审核~</view
        >
        <view class="description">可在个人中心查看</view>
        <view class="btns">
          <button class="luckbtn luckbtn-default" @click="createAfterReturn">
            返回列表
          </button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { request, upload } from "@/utils/http.js";
import customtop from "@/components/customtop.vue";

export default {
  components: { customtop },

  data() {
    return {
      loading: true,
      loginUser: {},
      abb: {},
      result: false,
    };
  },

  onLoad(options) {
    uni.showLoading();
    request.post("/abb/getAbb_my", { id: options.id }).then((res) => {
      uni.hideLoading();
      this.loading = false;
      this.abb = res.data;
    });
  },

  onShow() {
    request.post("/user/getLoginUser").then((res) => {
      this.loginUser = res.data;
    });
  },

  methods: {
    payDeposit: function () {
      let that = this;
      uni.showModal({
        title: "提示",
        content: "确认操作？",
        success: function (res) {
          if (res.confirm) {
            uni.showLoading();
            request.post("/abb/payDeposit", { id: that.abb.id }).then((res) => {
              uni.hideLoading();
              if (res.code == 200) {
                that.result = true;
                // 通知来源页
                var pages = getCurrentPages();
                var prevPage = pages[pages.length - 2];
                if (prevPage.updateAfter != undefined)
                  prevPage.updateAfter(that.abb.id, {
                    ident: "deposit",
                    status: 1,
                  });
              } else if (res.code == 400) {
                uni.showModal({ showCancel: false, content: res.message });
              } else {
                uni.showToast({ icon: "none", title: res.message });
              }
            });
          }
        },
      });
    },

    createAfterReturn: function () {
      uni.navigateBack({ delta: 1 });
    },

    switchTab: function (url) {
      uni.switchTab({
        url: url,
      });
    },

    jumpPage: function (url) {
      uni.navigateTo({
        url: url,
      });
    },
  },
};
</script>

<style>
@import url("abb.css");
page {
  background-color: #fff;
  padding-bottom: 30rpx;
}

.result {
  text-align: center;
  padding: 60rpx;
}
.result .txt {
  letter-spacing: 2px;
}
.result .txt .icon {
  margin-right: 8rpx;
}
.result .description {
  margin-top: 20rpx;
  color: #999;
  font-size: 24rpx;
}
.result .btns {
  margin-top: 30rpx;
}
.result .btns .btn {
  margin-left: 10rpx;
}
.result .btns .btn:first-child {
  margin-left: 0;
}
</style>
